<html>
    <head>
    <body>
        <time></time>
        <div id="container">Loading ...</div>
    <script src="socket.io/socket.io.js"></script>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>

        // creating a new websocket
        var socket = io.connect('http://localhost');
        	// on message received we print the new data inside the #container div
        	socket.on('notification', function (data) {
        		var usersList = "<table border=\"1\" width = \"100%\">";
				
				usersList += "<tr><td width = \"10%\"> Table </td>";
				usersList += "<td width = \"75%\"> Choice </td>";
				//usersList += "<td> Submitted Time </td>";
				usersList += "<td width = \"15%\">Status</td>";

        		$.each(data.users,function(index,user){
	    			var num = user.num;
					var user_id = "datasend" + num;
			
            		usersList += "<tr><td>" + user.tableNum + "</td>" +
                         		"<td>" + user.foodChoice  + "</td>" +
								"<td>" + "<input type=\"button\" id=\"" + user_id + "\" value=\"Confirm Done\"" + "</td></tr>";

        		});
        		usersList += "</table>";
        		$('#container').html(usersList);
   		
				//$('time').html('Last Update:' + data.time);
				
				var all = document.getElementsByTagName("*");				
				for (var i = 0; i < all.length; i++){
					if(all[i].type == "button"){
						$(all[i]).click( function() {
                        	//var message = $('#fu').val();
                        	// tell server to execute 'sendchat' and send along one parameter
							var id = ($(this).attr('id'));							
							var message = id.substring(8);
                        	socket.emit('done', message);
                		});
					}
				}
      	});

		
    </script>
    </body>
</html>
